import React, { Component } from 'react'
// 定义reduce传过来的类型
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { registerUser } from '../../actions/authActions'
import { withRouter } from 'react-router-dom'
import TextFieldGroup from '../../common/TextFieldGroup';

// import classnames from 'classnames'
export class Register extends Component {
  state = {
    name: '',
    email: '',
    password: '',
    password2: "",
    errors: {}
  }
  onChange = (e) => {
    this.setState({ [e.target.name]: e.target.value })
  }
  onSubmit = (e) => {
    e.preventDefault()
    const newUser = {
      name: this.state.name,
      email: this.state.email,
      password: this.state.password,
      password2: this.state.password2,
    }
    this.props.registerUser(newUser, this.props.history)

  }
  // 页面渲染
  componentDidMount () {
    // 如果授权就进入控制面板页面
    if (this.props.auth.isAuthenticated) {
      this.props.history.push('/dashboard')

    }
  }
  // 接受新的数据如果有错误提示就赋值
  UNSAFE_componentWillReceiveProps (nextProps) {
    if (nextProps.errors) {
      this.setState({ errors: nextProps.errors })
    }
  }
  render () {
    const { errors } = this.state;
    return (
      <div className="register">
        <div className="container">
          <div className="row">
            <div className="col-md-8 m-auto">
              <h1 className="display-4 text-center">注册</h1>
              <p className="lead text-center">创建新的账户</p>
              <form onSubmit={this.onSubmit}>
                <TextFieldGroup
                  placeholder="用户名"
                  name="name"
                  value={this.state.name}
                  onChange={this.onChange}
                  error={errors.name}
                />

                <TextFieldGroup
                  type="email"
                  placeholder="邮箱地址"
                  name="email"
                  value={this.state.email}
                  onChange={this.onChange}
                  error={errors.email}
                  info="我们使用了gravatar全球公认头像, 如果需要有头像显示, 请使用在gravatar注册的邮箱"
                />

                <TextFieldGroup
                  type="password"
                  placeholder="密码"
                  name="password"
                  value={this.state.password}
                  onChange={this.onChange}
                  error={errors.password}
                />

                <TextFieldGroup
                  type="password"
                  placeholder="确认密码"
                  name="password2"
                  value={this.state.password2}
                  onChange={this.onChange}
                  error={errors.password2}
                />
                <input type="submit" className="btn btn-info btn-block mt-4" />
              </form>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
// 获取reduce中在actions定义的initalStaten属性值
const mapStateToProps = (state) => ({
  auth: state.auth,
  errors: state.errors

})
// dispatch 方法
const mapDispatchToProps = (dispatch) => {
  return {
    registerUser: (params, history) => {
      dispatch(registerUser(params, history))
    }

  }
}
// 定义reduce传过来的类型
Register.propTypes = {
  registerUser: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  errors: PropTypes.object.isRequired,
}
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Register))

